import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
import Box from '../box/box.jsx';

import styles from './webgl-modal.css';

const WebGlModal = ({...props}) => (
    <ReactModal
        isOpen
        className={styles.modalContent}
        contentLabel="你的浏览器不支持WebGL"
        overlayClassName={styles.modalOverlay}
        onRequestClose={props.onBack}
    >
        <div dir='ltr'>
            <Box className={styles.illustration} />

            <Box className={styles.body}>
                <h2>你的浏览器不支持WebGL</h2>
                <p>
                    非常遗憾，你的电脑或浏览器
                    <a className={styles.faqLink} href="https://get.webgl.org/" >不支持WebGL</a>。
                    Scratch 3.0需要该技术才能运行。
                </p>

                <Box className={styles.buttonRow}>
                    <button className={styles.backButton} onClick={props.onBack} >
                        返回
                    </button>
                </Box>
                <div className={styles.faqLinkText}>
                    访问
                    <a className={styles.faqLink} href="/3faq">常见问题</a>，
                    了解更多。  
                </div>
            </Box>
        </div>
    </ReactModal>
);

WebGlModal.propTypes = {
    onBack: PropTypes.func.isRequired
};

export default WebGlModal;
//export default injectIntl(WebGlModal);
